<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录 · 语雀</title>
        <link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
        <style type="text/css">
            html,body {
                padding:0px;
                margin: 0px;
                background-color: #fafafa;
            }
            a {
                text-decoration: none;
                background-color: transparent;
                cursor: pointer;
                color:#096dd9 ;
            }
            input {
                opacity: 0.5;
            }
            /* 穿越样式 */
            .wrapper {
                width: 100%;
            }
            /* 主体样式 */
            .wrapper .context {
                width: 400px;
                margin: 96px auto 0px;
                overflow: hidden;
                padding:40px 8px 16px ;
                background-color: #fff;
                border: 1px solid #e9e9e9;
                box-sizing: border-box;
                border-radius: 4px;
            }
                /* logo部分 */
            .wrapper .context .top {
                max-width: 320px;
                margin: 0 auto;
                padding-bottom: 20px;
                text-align: center;
            }
            .wrapper .context .top img {
                width: 64px;
                height: 64px;
            }
                /* 信息输入 和 使用其他账户登陆 部分的样式 */
            .wrapper .context .bottom {
                width: 320px;
                margin: 0 auto;
                text-align: center;
                font-size: 14px;
                border-radius: 4px;
            }
            .wrapper .context .bottom .bottom-title {
                text-align: center;
                width: 100%;
                margin-bottom: 32px;
            }
            .wrapper .context .bottom .bottom-title .title-name {
                font-size: 32px;
                line-height: 1.2;
                color: #262626;
                margin: 0px;
                box-sizing: border-box;
            }
            .wrapper .context .bottom .bottom-title .title-intro {
                font-size: 18px;
                margin-top: 8px;
                color: #595959;
                box-sizing: border-box;
            }
                        /* 电话填写和验证码输入部分 */
            .wrapper .context .bottom .bottom-form {
                font-size: 14px;
                text-align: center;
            }
                                    /* 电话部分 */
            .wrapper .context .bottom .bottom-form .telephone {
                margin: 0 0 16px;
                height: 40px;
                vertical-align: top;
                padding: 0;
            }
            .wrapper .context .bottom .bottom-form .telephone .select-wrapper {
                height: 40px;
                cursor: pointer;
                width: 88px;
                border-radius: 4px 0 0 4px;
                border: 1px solid #d9d9d9;
                box-sizing: border-box;
                outline: none;
                transition: all 0.3s  cubic-bezier(.645,.045,.355,1);
                font-size: 16px;
                border-right: 0px;
                float: left;
            }
            .wrapper .context .bottom .bottom-form .telephone .select-wrapper .select {
                margin-left: 11px;
                line-height: 40px;
                box-sizing: border-box;
                color: #595959;
                float: left;
            }
            .wrapper .context .bottom .bottom-form .telephone .select-wrapper .select-logo {
                float:right ;
                color:#d9d9d9 ;
                line-height: 40px;
                margin-right: 10px;
            }
            .wrapper .context .bottom .bottom-form .telephone input {
                width: 232px;
                float: left;
                box-sizing: border-box;
                border: 1px solid  #d9d9d9;
                height: 40px;
                text-overflow:ellipsis;
                padding: 6px 11px;
                border-radius: 0 4px 4px 0;
                transition: all 0.3s;
                font-size: 17px;
            }
            .wrapper .context .bottom .bottom-form .telephone input:focus {
                border-color:#47c479 ;
                box-shadow: 0 0 0px 2px rgba(37,184,100,.2);
                outline: none;
            }
                                    /* 验证码部分 */
            .wrapper .context .bottom .bottom-form .check {
                width: 100%;
                height: 40px;
                cursor: pointer;
            }
            .wrapper .context .bottom .bottom-form .check input {
                height: 40px;
                width: 188px;
                padding: 6px 11px;
                float: left;
                box-sizing: border-box;
                border: 1px solid #d9d9d9;
                outline: none;
                border-radius: 4px;
                font-size: 17px;
            }
            .wrapper .context .bottom .bottom-form .check input:focus {
                border-color:#47c479 ;
                box-shadow: 0 0 0px 2px rgba(37,184,100,.2);
                outline: none;
            }
            .wrapper .context .bottom .bottom-form .check .get-number {
                float: right;
                border-radius: 4px;
                border: 1px solid #d9d9d9;
                outline: none;
                width: 124px;
                line-height: 40px;
                box-sizing: border-box;
                font-size: 14px;
                letter-spacing: 0;
                padding: 0 12px;
                color: #595959;
            }
                        /* 按钮部分样式 */
            .wrapper .context .bottom .bottom-form button {
                margin-top: 24px;
                width: 100%;
                height: 40px;
                border-radius: 4px;
                background-color: #25b864;
                color: #fff;
                font-size: 16px;
                text-align: center;
                border: 0;
                cursor: pointer;
                outline: none;
                transition: all 0.3s;
            }
            .wrapper .context .bottom .bottom-form button:active {
                background-color: #47c479;
            }
                         /* 协议部分样式 */
            .wrapper .context .bottom .bottom-form .protocol {
                margin-top: 8px;
                color:#8c8c8c;
                margin-bottom: 0px;
            }
            .wrapper .context .bottom .bottom-form .protocol a {
                color:#096dd9;
                text-decoration: none;
                background-color: transparent;
                transition: color 0.3s;
                box-sizing: border-box;
            }
                /* 使用其他账户注册 */
            .wrapper .context .other-account {
                margin: 10px auto 0;
                padding: 42px 10px 0;
                width: 240px;
                position: relative;
                box-sizing: border-box;
                overflow: hidden;
            }
            .wrapper .context .other-account .intro {
                display: none;
                position: absolute;
                top:0px;
                font-size: 12px;
                box-sizing: border-box;
            }
            .wrapper .context .other-account .message {
                min-width: 30px;
                min-height: 32px;
                padding: 6px 8px;
                color: #ffffff;
                border-radius: 4px;
                background-color: rgba(0,0,0,.75);
                box-sizing: border-box;
            }
            .wrapper .context .other-account a {
                float: left;
                display: block;
                width: 35px;
                height: 35px;
                margin: 0 10px 0 10px;
                border-radius: 50%;
            }
            .wrapper .context .other-account a .first {
                width: 28px;
                height: 29px;
                margin-right: 5px;
                display: block;
                background-image: url("https://gw.alipayobjects.com/mdn/prod_resou/afts/img/A*wLosTZsNyYcAAAAAAAAAAABjARQnAQ");
                background-size: 100%;
                background-position: 0 -28.7px;
            }
            .wrapper .context .other-account a .first:hover~ .first-intro {
                display: block;
                left: 1px;
            }
            .wrapper .context .other-account a .second {
                width: 28px;
                height: 29px;
                margin-right: 5px;
                display: block;
                background-image: url("https://gw.alipayobjects.com/mdn/prod_resou/afts/img/A*wLosTZsNyYcAAAAAAAAAAABjARQnAQ");
                background-size: 100%;
            }
            .wrapper .context .other-account a .second:hover~ .second-intro {
                display: block;
                left: 50px;
            }
            .wrapper .context .other-account a .third {
                width: 28px;
                height: 29px;
                margin-right: 5px;
                display: block;
                background-image: url("https://gw.alipayobjects.com/mdn/prod_resou/afts/img/A*wLosTZsNyYcAAAAAAAAAAABjARQnAQ");
                background-size: 100%;
                background-position: 0 -59.5px;
            }
            .wrapper .context .other-account a .third:hover~ .third-intro {
                display: block;
                right: 60px;
            }
            .wrapper .context .other-account a .four {
                width: 28px;
                height: 29px;
                margin-right: 5px;
                display: block;
                background-image: url("https://gw.alipayobjects.com/zos/basement_prod/740e223d-7c72-4259-93f3-df7e608e9376.svg");
                background-size: 100%;
                background-repeat: no-repeat;
            }
            .wrapper .context .other-account a .four:hover~ .four-intro {
                display: block;
                right: 1px;
            }

                /* foot部分样式 */
            .wrapper .context .foot {
                margin-top: 26px;
                box-sizing: border-box;
                text-align: center;
            }
            .wrapper .context .foot a:active {
                color: #0050b3;
            }
            .wrapper .context .foot a:hover {
                color:#1890ff
            }
            .wrapper .context .foot span {
                margin: 0 8px;
                opacity: 0.5;
                color: #333333;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="context">
                <!-- 顶部logo -->
                <div class="top">
                    <a>
                        <img src="https://gw.alipayobjects.com/mdn/prod_resource/afts/img/A*FsnmRIiTfe0AAAAAAAAAAABkARQnAQ" alt="语雀">
                    </a>
                </div>
                <!-- 表单部分 -->
                <div class="bottom">
                    <!-- 标题部分 -->
                    <div class="bottom-title">
                        <div class="title-name">语雀</div>
                        <div class="title-intro">专业的云端知识库</div>
                    </div>
                    <!-- 信息和协议部分 -->
                    <div class="bottom-form">
                        <!-- 信息填写 -->
                        <div class="telephone">
                                <div class="select-wrapper">
                                    <div class="select">+86</div>
                                    <div class="fa fa-angle-down select-logo"></div>
                                </div>
                                <input placeholder="手机号" autocomplete="off" type="tel">
                            </div>
                        <div class="check">
                            <input placeholder="6 位短信验证码" type="tel" maxlength="6" autocomplete="off">
                            <div class="get-number">获取短信验证码</div>
                        </div>
                        <!-- 按钮部分样式  -->
                        <button >快速注册</button>
                        <!-- 协议 -->
                        <p class="protocol">
                            注册即表明同意
                            <a href="https://www.yuque.com/terms">《语雀服务协议》</a>
                        </p>
                    </div>
                </div>
                <!-- 使用其他账户登录 -->
                <div class="other-account">
                    <a>
                        <span class="first"></span>
                        <div class="intro first-intro">
                            <div class="message">钉钉登录</div>
                        </div>
                    </a>
                    <a>
                        <span class="second"></span>
                        <div class="intro second-intro">
                            <div class="message">支付宝登录</div>
                        </div>
                    </a>
                    <a>
                        <span class="third"></span>
                        <div class="intro third-intro">
                            <div class="message">微信登录</div>
                        </div>
                    </a>
                    <a>
                        <span class="four"></span>
                        <div class="intro four-intro">
                            <div class="message">Teambition登录</div>
                        </div>
                    </a>
                </div>
                <!-- foot -->
                <div class="foot">
                    <a href="https://www.yuque.com/login" style="color:#096dd9 ">直接登录</a>
                    <span>|</span>
                    <a href="https://www.yuque.com/yuque/help/sms-issue">遇到问题</a>
                </div>
            </div>
        </div>
    </body>
</html>